<template>
    <view class="buddy-card" @click="goToDetail">
      <!-- Top Section: Left (User Info) + Right (Buddy Details) -->
      <view class="top-section">
        <!-- Left: User Info -->
      <view class="user-info">
        <image 
          :src="buddy.avatar" 
          class="avatar"
          @click.stop="goToProfile"
        ></image>
        <view class="user-details">
          <text class="name">{{ buddy.name }}</text>
          <view class="rating">
              <image src="/static/huo.png" class="rating-icon" mode="aspectFit"></image>
            <text>{{ buddy.rating }}</text>
          </view>
        </view>
      </view>
  
        <!-- Right: Buddy Details -->
      <view class="buddy-details">
          <view class="detail-header">
            <view class="title-wrapper">
        <text class="title">{{ buddy.title }}</text>
              <text class="buddy-type-name">{{ buddy.buddyTypeName }}</text>
            </view>
            <view :class="['tag', `tag-${buddy.type}`]">{{ buddy.tag }}</view>
          </view>
        <view class="detail-row">
            <image src="/static/time.png" class="detail-icon" mode="aspectFit"></image>
          <text>{{ buddy.date }}</text>
        </view>
        <view class="detail-row">
            <image src="/static/location-small.png" class="detail-icon" mode="aspectFit"></image>
          <text>{{ buddy.location }}</text>
        </view>
          <view class="detail-row detail-tags">
            <view class="detail-tag">{{ buddy.restrictions }}</view>
            <view class="detail-tag">{{ buddy.duration }}</view>
            <view class="detail-tag" v-if="buddy.distance">距离{{ buddy.distance }}</view>
          </view>
        </view>
      </view>
  
      <!-- Images Section -->
      <view class="buddy-images">
        <image v-for="(img, index) in buddy.images" :key="index" :src="img" class="buddy-image" mode="aspectFill"></image>
      </view>
  
      <!-- Footer Section -->
      <view class="card-footer">
        <view class="participants">
          <view class="participant-avatars" v-if="buddy.participants && buddy.participants.length">
            <image
              v-for="(pAvatar, index) in buddy.participants"
              :key="`${pAvatar}-${index}`"
              :src="pAvatar"
              class="participant-avatar"
              mode="aspectFill"
            />
            <view v-if="buddy.hasMoreParticipants" class="participant-more">…</view>
          </view>
          <text class="participant-count" v-if="buddy.participantsCount > 0">
            已有{{ buddy.participantsCount }}人参与
          </text>
          <text class="participant-count" v-else>暂无人参与</text>
        </view>
        <view class="action-section">
          <text class="price">¥{{ buddy.price }}</text>
          <button class="join-button" :disabled="joinLoading" @click.stop="handleJoin">
            {{ joinLoading ? '提交中...' : '立即参与' }}
          </button>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  
  
  const props = defineProps({
    buddy: {
      type: Object,
      required: true,
    },
    clickable: {
      type: Boolean,
      default: true,
    },
    joinLoading: {
      type: Boolean,
      default: false,
    },
  });

  const emit = defineEmits(['join']);

  const goToDetail = () => {
    if (!props.clickable) {
      return; // 如果不可点击，直接返回
    }
    if (props.buddy && props.buddy.id) {
      uni.navigateTo({
        url: `/pages/buddy/detail?id=${props.buddy.id}`
      });
    }
  };

  const goToProfile = () => {
    if (props.buddy && props.buddy.publisherId) {
      uni.navigateTo({
        url: `/pages/user/profile?userId=${props.buddy.publisherId}`
      });
    } else {
      uni.showToast({
        title: '用户信息缺失',
        icon: 'none'
      });
    }
  };

  const handleJoin = () => {
    if (props.joinLoading) {
      return;
    }
    emit('join');
  };
  </script>
  
  <style lang="scss" scoped>
  .buddy-card {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    cursor: pointer;
  
    .top-section {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;
      gap: 20rpx;
    }
  
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      width: 120rpx;
  
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-bottom: 10rpx;
        flex-shrink: 0;
        cursor: pointer;
        transition: opacity 0.2s;
        
        &:active {
          opacity: 0.7;
        }
      }
  
      .user-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        
        .name {
          font-size: 26rpx;
          color: #333;
          margin-bottom: 8rpx;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
        }
        .rating {
          display: flex;
          align-items: center;
          font-size: 22rpx;
          color: #ED483D;
          .rating-icon {
            width: 28rpx;
            height: 28rpx;
            margin-right: 6rpx;
          }
        }
      }
    }
  
    .buddy-details {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
      text-align: left;
  
      .detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
        gap: 10rpx;
      }
      
      .title-wrapper {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
      }
  
      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
      }
      
      .buddy-type-name {
        font-size: 24rpx;
        color: #F18F10;
        background-color: rgba(252, 231, 152, 0.42);
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        margin-left: 8rpx;
        flex-shrink: 0;
      }
  
      .tag {
        padding: 6rpx 12rpx;
        border-radius: 20rpx;
        font-size: 22rpx;
        color: #fff;
        white-space: nowrap;
        flex-shrink: 0;
        &.tag-game {
          background-color: #ffc107;
        }
        &.tag-travel {
          background-color: #007bff;
        }
        &.tag-meal {
          background-color: #28a745;
        }
      }
  
      .detail-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 6rpx;
        text-align: left;
        uni-icons {
          margin-right: 6rpx;
          flex-shrink: 0;
        }
        .detail-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 6rpx;
          flex-shrink: 0;
        }
        text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
          max-width: 100%;
        }
        &.detail-icons {
          flex-wrap: wrap;
          text {
            flex: none;
            text-align: left;
          }
        }
        &.detail-tags {
          gap: 10rpx;
          flex-wrap: wrap;
        }
      }
      
      .detail-tag {
        background-color: #F6F6F8;
        color: #666;
        font-size: 24rpx;
        padding: 6rpx 12rpx;
        border-radius: 20rpx;
        white-space: nowrap;
      }
    }
  
    .buddy-images {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
      margin-bottom: 20rpx;
  
      .buddy-image {
        width: calc(33.33% - 7rpx);
        height: 180rpx;
        border-radius: 10rpx;
        object-fit: cover;
      }
    }
  
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(90deg, #DCEAFA 0%, #E6E4FF 35%, rgba(220, 234, 250, 0) 69%);
      padding: 8rpx 16rpx;
      border-radius: 16rpx;
  
      .participants {
        display: flex;
        align-items: center;

        .participant-avatars {
          display: flex;
          align-items: center;
          position: relative;

          .participant-avatar {
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            border: 2rpx solid #fff;
            margin-left: -12rpx;

            &:first-child {
              margin-left: 0;
            }
          }

          .participant-more {
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #666;
            margin-left: -12rpx;
            border: 2rpx solid #fff;
          }
        }

        .participant-count {
          font-size: 24rpx;
          color: #999;
          margin-left: 16rpx;
        }
      }
  
      .action-section {
        display: flex;
        align-items: center;
  
        .price {
          font-size: 32rpx;
          font-weight: bold;
          color: #ED483D;
          margin-right: 16rpx;
        }
  
        .join-button {
          background: linear-gradient(90deg, #B276FF 0%, #74A7FF 100%);
          color: #fff;
          font-size: 24rpx;
          padding: 8rpx 20rpx;
          border-radius: 32rpx;
          line-height: 1;
          height: auto;

          &::after {
            border: none;
          }

          &.button-disabled,
          &:disabled {
            opacity: 0.6;
          }
        }
      }
    }
  }
  </style>